<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel导入Mysql数据库|ziyou util</title>
</head>
<body onbeforeunload="return closeFunction()">
<h1>Excel导入Mysql数据库|自由工具</h1>
<span style="color: red">提示:数据库列填写时请与Excel列从左到右的顺序一一对应</span><br>
<span style="color: red">提示:本站不会记录用户数据库敏感信息</span><br>
<span style="color: red">限制文件大小:19.99MB</span><br>
<span style="color: red">部分异常无法被拦截到页面展示,如遇到问题,可以发送邮件至lgp1022@foxmail.com联系作者</span><br>
<span style="color: red">项目完全开源,源码地址:<a href="https://gitee.com/lgp521/lgp6_util">码云</a></span>
<div style="border: 1px black dashed">
    <h2>数据填写</h2>
    <form id="form"  action="/importExcelToMysql" method="post" enctype ="multipart/form-data">
        <table>
            <tr>
                <td> 数据库连接地址(非jdbcurl,仅填写ip地址即可):</td>
                <td><input type="text" name="address" required cnname="数据库连接地址"/></td>
            </tr>
            <tr>
                <td> 端口号:</td>
                <td><input type="text" name="port" value="3306" required cnname="端口号"/></td>
            </tr>
            <tr>
                <td> 数据库名称:</td>
                <td><input type="text" name="database" required cnname="数据库名称"/></td>
            </tr>
            <tr>
                <td> 表名称:</td>
                <td><input type="text" name="tableName" required cnname="表名称"/></td>
            </tr>
            <tr>
                <td> 数据库用户名:</td>
                <td><input type="text" name="username" value="root" required cnname="数据库用户名"/></td>
            </tr>
            <tr>
                <td> 数据库密码:</td>
                <td><input type="password" name="password" value="root" required cnname="数据库密码"/></td>
            </tr>
            <tr>
                <td> 列名(逗号分割,对应Excel数据从左到右顺序):</td>
                <td><input type="text" name="columns" placeholder="例:name,sex,age" required cnname="列名"/></td>
            </tr>
            <tr>
                <td> 有效数据起始行:</td>
                <td><input type="text" name="startRow" value="1" required cnname="有效数据起始行"/></td>
            </tr>
            <tr>
                <td> 有效数据起始列:</td>
                <td><input type="text" name="startColumn" value="0" required cnname="有效数据起始列"/></td>
            </tr>
            <tr>
                <td> Excel文件:</td>
                <td><input type="file" name="file" id="file" onchange="changeFile()" required cnname="Excel文件"/></td>
            </tr>

            <tr>
                <td colspan="2">         <button id="subBtn" type="button" onclick="appendQueue()">提交数据</button>&nbsp;&nbsp;
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
<input type="hidden" name="sessionId" id="sessionId">
    </form>
</div>
<div style="border: 1px black dashed;">
    <h2 id="logTitle">日志打印</h2>

    <button onclick="clearLog()">清空日志</button>
    <div id="logArea">
    </div>
</div>
</body>
</html>
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/jquery-form.js"></script>
<script>
    var websocket=null;
    //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://47.103.202.101:9411/excel/queue");
    } else {
        $('#logArea').append("<br><span style='color: red'>"+new Date()+":当前浏览器不支持队列"+"</span>")
    }
    // $('#logArea').append("<br><span style='color: green'>"+new Date()+":环境:"+"</span>")
    //连接发生错误的回调方法
    websocket.onerror = function () {
        $('#logArea').append("<br><span style='color: red'>"+new Date()+":连接队列服务器错误"+"</span>")
    };
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        $('#logArea').append("<br><span style='color: green'>"+new Date()+":初始化队列环境成功"+"</span>")
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        var obj=JSON.parse(event.data);
        if (obj.type=="error"){
            $('#logArea').append("<br><span style='color: red'>"+new Date()+":"+obj.msg+"</span>")
        }
        if (obj.type=="finish"){
            $('#logArea').append("<br><span style='color: green'>"+new Date()+":"+obj.msg+"</span>")
            if (obj.pre===0){
                submitData();
            }
        }
        if (obj.type=="start"){
            $('#subBtn').attr("disabled","disabled");
            $('#logArea').append("<br><span style='color: green'>"+new Date()+":加入队列成功,"+obj.msg+"</span>")
            $('#sessionId').val(obj.sessionId);
            if (obj.pre===0){
                submitData();
            }
        }
        if (obj.type=="message"){
            $('#logArea').append("<br><span style='color: green'>"+new Date()+":"+obj.msg+"</span>")
        }
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        $('#logArea').append("<br><span style='color: red'>"+new Date()+":队列连接关闭"+"</span>")
    };
    window.onbeforeunload = function () {
        console.log("1");
        websocket.close();
    }
    var fileSize=0;
    function changeFile() {
        var size=$('#file').get(0).files[0].size;
        fileSize=size;
        $('#logArea').append("<br><span style='color: green'>"+new Date()+"上传文件大小:"+size+":</span>");
        if (size>20866662.4){
            $('#logArea').append("<br><span style='color: red'>"+new Date()+":非法文件大小"+"</span>")
        }
    }
    function clearLog() {
        $('#logArea').empty();
    }
    function submitData() {
        $('#logArea').append("<br><span style='color: green'>"+new Date()+":提交数据,若长时间无反应可能正在导入,请耐心等待!</span>");
        var check=true;
        $('#form').find("input").each(function () {
            if ($(this).val()===''&&$(this).attr("required")!=null){
                $('#logArea').append("<br><span style='color: red'>"+new Date()+":表单中存在空数据,请检查"+$(this).attr('cnname')+"</span>")
                check=false;
            }
        });

        if (fileSize>20866662.4){
            $('#logArea').append("<br><span style='color: red'>"+new Date()+":非法文件大小"+"</span>")
            check=false;
        }

        if (check){
            $('#form').ajaxSubmit(function (obj) {
                $('#logArea').append("<br><span style='color: green'>"+new Date()+":得到接口请求结果</span>");
                if (obj.code==='0'){
                    $('#logArea').append("<br><span style='color: green'>"+new Date()+":"+obj.msg+"</span>")
                }
                if (obj.code==='1'){
                    $('#logArea').append("<br><span style='color: black'>"+new Date()+":"+obj.msg+"</span>")
                }
                if (obj.code==='2'){
                    $('#logArea').append("<br><span style='color: red'>"+new Date()+":"+obj.msg+"</span>")
                }
            })
        }


    }
    function appendQueue() {
        var check=true;
        $('#form').find("input").each(function () {
            if ($(this).val()===''&&$(this).attr("required")!=null){
                $('#logArea').append("<br><span style='color: red'>"+new Date()+":表单中存在空数据,请检查"+$(this).attr('cnname')+"</span>")
                check=false;
            }
        });

        if (fileSize>20866662.4){
            $('#logArea').append("<br><span style='color: red'>"+new Date()+":非法文件大小"+"</span>")
            check=false;
        }
        if (check){
            websocket.send("join");
        }

    }


</script>